<template>
	<view class="pages">
		<!-- 模块1 -->
		<view class="items">
			<view class="itemsTitle">
				Personal Data
			</view>
			<view class="liContent">
				<view class="itemsLi">
					<view class="itemsLiLeft" style="background-color: #EFEBFA;">

					</view>
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							${{$formatNumberWithCommas(tpInfo.baseshop_tp ? tpInfo.baseshop_tp : 0)}}
						</view>
						<view class="itemsLiRightButtom">
							Baseshop TP
						</view>
					</view>
				</view>

				<view class="itemsLi">
					<view class="itemsLiLeft" style="background-color: #FFF3E4;">

					</view>
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							${{$formatNumberWithCommas(paid_commission ? paid_commission : 0)}}
						</view>
						<view class="itemsLiRightButtom">
							Paid Commission
						</view>
					</view>
				</view>

				<view class="itemsLi">
					<view class="itemsLiLeft" style="background-color: #FAEBEB;">

					</view>
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							${{ $formatNumberWithCommas(InforceTP ? InforceTP : 0)}}
						</view>
						<view class="itemsLiRightButtom">
							Inforce TP
						</view>
					</view>
				</view>

				<view class="itemsLi">
					<view class="itemsLiLeft" style="background-color: #EBF9FC;">

					</view>
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							{{allTotal.order_count || '0'}}
						</view>
						<view class="itemsLiRightButtom">
							Total Cases
						</view>
					</view>
				</view>

				<view class="itemsLi">
					<view class="itemsLiLeft" style="background-color: #EDFCEB;">
					</view>
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							${{$formatNumberWithCommas(PendingTP ? PendingTP : 0)}}
						</view>
						<view class="itemsLiRightButtom">
							Pending TP
						</view>
					</view>
				</view>

				<view class="itemsLi">
					<view class="itemsLiLeft" style="background-color: #E8EBEF;">

					</view>
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							{{allTotal.team_count || '0'}}
						</view>
						<view class="itemsLiRightButtom">
							Total Members
						</view>
					</view>
				</view>


			</view>
		</view>
		<!-- 模块2 -->
		<view class="items" style="padding-bottom: 30rpx;">
			<view class="itemsTitle" >
				Members
			</view>
			<view class="liContent" >
				<view class="itemsLi">
					<view class="itemsLiLeft" style="background-color: #E8EBEF;">
						<image src="../../static/u.png" mode="" style="width: 60%;height: 60%;"></image>
					</view>
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							{{activeUserInfo.active_num || ''}}
						</view>
						<view class="itemsLiRightButtom">
							Active Members
						</view>
					</view>
				</view>
				<view class="itemsLi">
					<view class="itemsLiLeft" style="background-color: #E8EBEF;">
						<image src="../../static/u.png" mode="" style="width: 60%;height: 60%;"></image>
					</view>
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							{{activeUserInfo.not_active_num || ''}}
						</view>
						<view class="itemsLiRightButtom">
							Inactive Members
						</view>
					</view>
				</view>
			</view>
		<u-button type="primary" text="Team"
					:customStyle="{width:'100%',height:'80rpx',backgroundColor:'#273562',color:'#fff',margin:'rpx auto 30rpx',fontWeight:'700',border:'none'}"
					@click="$next('/pages/home/Team')"></u-button>
		</view>
		<!-- 模块3 -->
		<view class="items">
			<view class="itemsTitle">
				TP Distrubution
			</view>
			<view class="c" style="margin-bottom: 40px;">
				<view class="itemsTitle rtitle">
					${{ $formatNumberWithCommas(allTotalSum ? allTotalSum : 0) }}
				</view>
				<view class="rt">
					All Total
				</view>
				<TPdistrubutionCom ref="AllTotal"></TPdistrubutionCom>
			</view>
		</view>
		<!-- 模块4 -->
		<view class="items">
			<view class="itemsTitle">
				Total Business
			</view>
			<view class="c" style="margin-bottom: 40px;">
				<!-- 				<view class="itemsTitle rtitle">
					$144,482.21
				</view>
				<view class="rt">
					All Total
				</view> -->
				<gauge ref="percent"></gauge>
			</view>
			<view class="liContent cv">
				<view class="itemsLi">
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							{{orderInfo.total_order || ''}}
						</view>
						<view class="itemsLiRightButtom">
							Total Policy
						</view>
					</view>
				</view>

				<view class="itemsLi">

					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							{{orderInfo.is_ok_order || ''}}
						</view>
						<view class="itemsLiRightButtom">
							Inforce Policy
						</view>
					</view>
				</view>

				<view class="itemsLi">

					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							{{orderInfo.not_ok_order || ''}}
						</view>
						<view class="itemsLiRightButtom">
							Pending Policy
						</view>
					</view>
				</view>

				<view class="itemsLi">
					<view class="itemsLiRight">
						<view class="itemsLiRightTop">
							{{orderInfo.team_prize_total || ''}}
						</view>
						<view class="itemsLiRightButtom">
							Total Commission
							Earned Policy
						</view>
					</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	import TPdistrubutionCom from './TPdistrubutionCom.vue'
	import gauge from './gauge.vue'
	export default {
		components: {
			TPdistrubutionCom,
			gauge
		},
		data() {
			return {
				allTotalSum: 0,
				InforceTP: 0,
				PendingTP: 0,
				allTotal: {},
				orderInfo: {},
				activeUserInfo: {},
				tpInfo: {},
				paid_commission: '',

			}
		},
		onShow() {
			this.getPersonData()
			this.tpget()
			this.getcomission()
		},
		methods: {
			getPersonData() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/index/index`).then(res => {
					this.allTotal = {
						...res.data.data.allTotal
					}
					this.orderInfo = {
						...res.data.data.orderInfo
					}
					this.activeUserInfo = {
						...res.data.data.activeUserInfo
					}
					this.tpInfo = {
						...res.data.data.tpInfo
					}
					this.$refs.percent.percent = (res.data.data.orderInfo.percent) / 100
					this.$refs.percent.opts.title.name = `${res.data.data.orderInfo.percent}%`
					this.$refs.percent.getServerData()
					console.log(res, 'resres');
				})

			},
			tpget() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/index/tp-sdata`).then(res => {
					this.InforceTP = res.data.data.inforce_tp
					this.PendingTP = res.data.data.pending_tp
					this.allTotalSum = parseFloat((this.InforceTP + this.PendingTP).toFixed(2));
					let da = [{
							name: "Pending TP",
							value: this.PendingTP ? this.PendingTP : 0,
							labelText: `Pending TP`
						},
						{
							name: "Inforce TP",
							value: this.InforceTP ? this.InforceTP : 0,
							labelText: `Inforce TP`
						}
					]
					
					this.$refs.AllTotal.pieData = da
					this.$refs.AllTotal.setChartData()
					console.log(res, 'res');
				})
			},
			getcomission() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/index/get-comission`).then(res => {
					this.paid_commission = res.data.data.paid_commission
					console.log(res, 'res');
				})
			}

		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		/* padding: 0 26rpx; */
		box-sizing: border-box;
		background-color: #F0F0F0;
		padding: 30rpx 20rpx 120rpx;
		box-sizing: border-box;
	}

	.items {
		overflow: auto;
		width: 100%;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.liContent {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 62rpx;
	}

	.itemsTitle {
		height: 48rpx;
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 48rpx;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		color: #5D5971;
		margin: 62rpx 0 68rpx;
	}

	.itemsLi {
		display: flex;
		align-items: flex-start;
		width: 330rpx;
		margin-bottom: 30rpx;
	}

	.itemsLiLeft {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		background-color: blueviolet;
		border-radius: 50%;
		/* margin-right: 20rpx; */
		margin: 0rpx 20rpx 0 0;

	}

	.itemsLiRightTop {

		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		color: #5D5971;
	}

	.itemsLiRightButtom {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		color: #5D5971;
		margin-top: 15rpx;
	}

	.rtitle {
		text-align: center;
		margin: 0;
	}

	.rt {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		color: #5D5971;
		text-align: center;
	}

	.cv .itemsLiRight {
		text-align: center;
		width: 300rpx;
	}

	.cv .itemsLiRight .itemsLiRightTop {
		text-align: center;
	}

	.cv .itemsLiRight .itemsLiRightButtom {
		text-align: center;
	}
</style>